<!-- @format -->

<template>
    <a-collapse :default-active-key="['1']">
        <a-collapse-item :header="customTranslate('General')" key="1">
            <Process :element="element"></Process>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Documentation')" key="4">
            <Documentation :element="element"></Documentation>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Start Initiator')" key="2">
            <CandidateStart :element="element"></CandidateStart>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Execution Listeners')" key="3">
            <ExcutedListener :element="element"></ExcutedListener>
        </a-collapse-item>
    </a-collapse>
</template>

<script>
import { inject } from "vue";
import Process from '../attrs/Process.vue'
import ExcutedListener from '../attrs/ExcutedListener.vue'
import CandidateStart from '../attrs/CandidateStart.vue'
import Documentation from '../attrs/Documentation.vue'
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'ProcessPanel',
    props: ["element"],
    components: { Process, ExcutedListener, CandidateStart, Documentation },
    data() {
        return {
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
}
</script>

<style lang="scss" scoped>

</style>
